<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>操作日志</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <div>
                    <el-form :inline="true" :model="rzForm" class="demo-form-inline">
                        <el-form-item label="时间:">
                            <el-date-picker v-model="rzForm.time" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                            type="datetimerange" range-separator="至" start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="resetForm">重置</el-button>
                            <el-button type="primary" @click="submitForm">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </div>

            <el-table :data="rzList" v-loading="loading" border max-height="650" highlight-current-row :row-style="{height: '20px'}"
				:header-cell-style="{background:'#e6e6e6',color:'#000000'}" @row-click="handle" ref="multipleTable">
                <el-table-column v-for="(item,index) in rzTableLabel" :key="index" :prop="item.prop" :width="item.width"
                                 :label="item.label">
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="page" :page-sizes="[15, 20, 50, 100]" :page-size="limit"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>


    </div>
</template>

<script>
export default {
    name: 'roles',
    data() {
        return {
            title: '系统日志',

            formInline: {
                user: '',
                region: ''
            },
            rzList: [

            ], //管理员列表模拟数据
            rzForm: {
                time: ''
            },
            // 操作日志表头表格
            rzTableLabel: [{
                label: '操作时间',
                width: '',
                prop: 'created_at'
            },
                {
                    label: '操作人员',
                    width: '',
                    prop: 'nickname'
                },
                {
                    label: '说明',
                    width: '',
                    prop: 'input'
                }
            ],


            loading: false,
            id: '',
            page: 1,
            limit: 15,
            total: 0,
        }
    },
    created() {
        // 获取客户列表
        this.getRzlist(this.page, this.limit);
    },
    activated() {
        // 获取客户列表
        this.getRzlist(this.page, this.limit);
    },

    methods: {

        // 分页
        handleSizeChange(size) {
            this.limit = size
            this.getRzlist(this.page, this.limit, this.rzForm.time);
        },
        handleCurrentChange(index) {
            this.page = index
            this.getRzlist(this.page, this.limit, this.rzForm.time);
        },
        // 点击查询按钮
        submitForm() {
            this.getRzlist(this.page, this.limit, this.rzForm.time);
        },
        // 点击重置按钮
        resetForm() {
            this.rzForm.time = [];
            this.getRzlist(1, 10);
        },
        // 获取客户管理列表
        getRzlist(page, limit, name) {
            let params = {
                page: page,
                per_page: limit,
            }
            if(name!==undefined){
                params.start_time = name[0];
                params.end_time = name[1];
            }
            this.$get(this.$api.getRizhi, params).then(res => {
                if (res.code == 200) {
                    this.total = res.data.total
                    let arr = res.data.data
                    let arrList = []
                    arr.forEach((item, index) => {
                        arrList.push(Object.assign({}, item, {
                            'xuhao': index + 1
                        }))
                    })
                    this.rzList = arrList
                    this.loading = false
                } else {
                    this.$message.error(res.msg);
                }

            }).catch(e=>{
                console.log(e);
            })
        },
    }
}
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
    display: flex;
    /* border: 1px solid red; */
}

.table {
    width: 100%;
    font-size: 14px;
}

/deep/ .isshow .el-upload--picture-card {
    display: none
}
</style>
